<template>
  <div class="wb-item-checkbox" :style="newItemStyle">
    <div :class="isSelected?'wb-item-checkbox-border':''" :style="imgStyle"></div>
    <van-checkbox
      checked-color="#07c160"
      v-model="isSelected"
      :style="imgStyle"
      class="wb-item-van-checkbox">
      <template #icon="props">
        <img style="width:1em;height:1em;" :src="props.checked ? activeIcon : inactiveIcon">
      </template>
    </van-checkbox>
    <!-- <van-image
      class="wb-item-checkbox-img"
      src="https://img.yzcdn.cn/vant/cat.jpeg"
    /> -->
    <p class="margin-left-8 wid-80-percent">{{ getBlogText }}</p>
  </div>
</template>

<script>
import { utils } from '@/components/utils/utils'
import { ref } from 'vue'

export default {
  setup () {
    return {
      isSelected: ref(false),
      activeIcon: 'https://static.hd.xxx.com/upload/biz/1/701316.png',
      inactiveIcon: 'https://static.hd.xxx.com/upload/biz/1/571683.png',
    };
  },
  mixins: [utils],
  props: {
    item: Object,
    index: Number,
  },
  computed: {
    newItemStyle() {
      return {
        ...this.itemStyle,
        ...this.imgStyle,
        backgroundImage: 'url(' + this.getVariableItem.url + ')',
      };
    },
  },
  methods: {
    onCheckbox(e){
      if(this.isH5Edit){
        return
      }
      if(e){
        e.stopPropagation()
        e.preventDefault()
      }
      // 拦截条件
      const comp = this.item;
      const compId = comp.id;
      const commonAttr = comp.commonAttr;
      let selecteds = null;
      let checkboxNum = 0
      if(this.formValues[compId]) {
        selecteds = this.formValues[compId].selecteds
        _.forEach(selecteds, () => {
            checkboxNum++;
        });
      };
      let max = parseInt(commonAttr.max);
      let min = parseInt(commonAttr.min);
      if (commonAttr.need && min < 1) min = 1;
      if (checkboxNum >= max && this.isSelected) {
        this.isSelected = false;
        const msg = '多选数量不对！';
        this.showToast(msg);
        return;
      }
    },
  }
}
</script>

<style lang="scss">
.wb-item-checkbox {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--size-10);

  .wb-item-checkbox-border {
    border: var(--size-4) solid #fff;
    border-radius: var(--size-10);
  }

  .wb-item-van-checkbox {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .wb-item-van-checkbox {
    position: absolute;
    right: var(--size--4);
    bottom: var(--size--4);
  }

  p {
    font-size: inherit;
  }
}
</style>
